<template>
    <h1>echarts展示</h1>
    <div id="main"></div>
</template>

<script>
import * as echarts from "echarts";
import axios from "axios";

export default {
    mounted() {
        // var ROOT_PATH = "http://127.0.0.1:5173";

        var chartDom = document.getElementById("main");
        var myChart = echarts.init(chartDom);
        var option;

        // axios.get("/api/data/asset/geo/Beef_cuts_France.svg").then((svg) => {
        axios.get("/api/data/asset/geo/Beef_cuts_France.svg").then((svg) => {
            echarts.registerMap("Beef_cuts_France", { svg: svg });
            option = {
                tooltip: {},
                visualMap: {
                    left: "center",
                    bottom: "10%",
                    min: 5,
                    max: 100,
                    orient: "horizontal",
                    text: ["", "Price"],
                    realtime: true,
                    calculable: true,
                    inRange: {
                        color: ["#dbac00", "#db6e00", "#cf0000"],
                    },
                },
                series: [
                    {
                        name: "French Beef Cuts",
                        type: "map",
                        map: "Beef_cuts_France",
                        roam: true,
                        emphasis: {
                            label: {
                                show: false,
                            },
                        },
                        selectedMode: false,
                        data: [
                            { name: "Queue", value: 15 },
                            { name: "Langue", value: 35 },
                            { name: "Plat de joue", value: 15 },
                            { name: "Gros bout de poitrine", value: 25 },
                            { name: "Jumeau à pot-au-feu", value: 45 },
                            { name: "Onglet", value: 85 },
                            { name: "Plat de tranche", value: 25 },
                            { name: "Araignée", value: 15 },
                            { name: "Gîte à la noix", value: 55 },
                            { name: "Bavette d'aloyau", value: 25 },
                            { name: "Tende de tranche", value: 65 },
                            { name: "Rond de gîte", value: 45 },
                            { name: "Bavettede de flanchet", value: 85 },
                            { name: "Flanchet", value: 35 },
                            { name: "Hampe", value: 75 },
                            { name: "Plat de côtes", value: 65 },
                            {
                                name: "Tendron Milieu de poitrine",
                                value: 65,
                            },
                            { name: "Macreuse à pot-au-feu", value: 85 },
                            { name: "Rumsteck", value: 75 },
                            { name: "Faux-filet", value: 65 },
                            { name: "Côtes Entrecôtes", value: 55 },
                            { name: "Basses côtes", value: 45 },
                            { name: "Collier", value: 85 },
                            { name: "Jumeau à biftek", value: 15 },
                            { name: "Paleron", value: 65 },
                            { name: "Macreuse à bifteck", value: 45 },
                            { name: "Gîte", value: 85 },
                            { name: "Aiguillette baronne", value: 65 },
                            { name: "Filet", value: 95 },
                        ],
                    },
                ],
            };
            myChart.setOption(option);
        });

        option && myChart.setOption(option);
    },
    // mounted() {
    //     // 图表1
    //     var chartDom = document.getElementById("main");
    //     var myChart = echarts.init(chartDom);
    //     var option;
    //     const names = [
    //         "Orange",
    //         "Tomato",
    //         "Apple",
    //         "Sakana",
    //         "Banana",
    //         "Iwashi",
    //         "Snappy Fish",
    //         "Lemon",
    //         "Pasta",
    //     ];
    //     const years = ["2001", "2002", "2003", "2004", "2005", "2006"];
    //     const shuffle = (array) => {
    //         let currentIndex = array.length;
    //         let randomIndex = 0;
    //         while (currentIndex > 0) {
    //             randomIndex = Math.floor(Math.random() * currentIndex);
    //             currentIndex--;
    //             [array[currentIndex], array[randomIndex]] = [
    //                 array[randomIndex],
    //                 array[currentIndex],
    //             ];
    //         }
    //         return array;
    //     };
    //     const generateRankingData = () => {
    //         const map = new Map();
    //         const defaultRanking = Array.from(
    //             { length: names.length },
    //             (_, i) => i + 1
    //         );
    //         for (const _ of years) {
    //             const shuffleArray = shuffle(defaultRanking);
    //             names.forEach((name, i) => {
    //                 map.set(
    //                     name,
    //                     (map.get(name) || []).concat(shuffleArray[i])
    //                 );
    //             });
    //         }
    //         return map;
    //     };
    //     const generateSeriesList = () => {
    //         const seriesList = [];
    //         const rankingMap = generateRankingData();
    //         rankingMap.forEach((data, name) => {
    //             const series = {
    //                 name,
    //                 symbolSize: 20,
    //                 type: "line",
    //                 smooth: true,
    //                 emphasis: {
    //                     focus: "series",
    //                 },
    //                 endLabel: {
    //                     show: true,
    //                     formatter: "{a}",
    //                     distance: 20,
    //                 },
    //                 lineStyle: {
    //                     width: 4,
    //                 },
    //                 data,
    //             };
    //             seriesList.push(series);
    //         });
    //         return seriesList;
    //     };
    //     option = {
    //         title: {
    //             text: "Bump Chart (Ranking)",
    //         },
    //         tooltip: {
    //             trigger: "item",
    //         },
    //         grid: {
    //             left: 30,
    //             right: 110,
    //             bottom: 30,
    //             containLabel: true,
    //         },
    //         toolbox: {
    //             feature: {
    //                 saveAsImage: {},
    //             },
    //         },
    //         xAxis: {
    //             type: "category",
    //             splitLine: {
    //                 show: true,
    //             },
    //             axisLabel: {
    //                 margin: 30,
    //                 fontSize: 16,
    //             },
    //             boundaryGap: false,
    //             data: years,
    //         },
    //         yAxis: {
    //             type: "value",
    //             axisLabel: {
    //                 margin: 30,
    //                 fontSize: 16,
    //                 formatter: "#{value}",
    //             },
    //             inverse: true,
    //             interval: 1,
    //             min: 1,
    //             max: names.length,
    //         },
    //         series: generateSeriesList(),
    //     };

    //     option && myChart.setOption(option);
    // },
    // mounted() {
    //     // // 基于准备好的dom，初始化echarts实例
    //     // const myChart = echarts.init(document.getElementById("main"));
    //     // // 绘制图表
    //     // myChart.setOption({
    //     //     title: {
    //     //         text: "ECharts 入门示例",
    //     //     },
    //     //     tooltip: {},
    //     //     xAxis: {
    //     //         data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    //     //     },
    //     //     yAxis: {},
    //     //     series: [
    //     //         {
    //     //             name: "商品销量",
    //     //             type: "bar",
    //     //             data: [5, 20, 36, 10, 10, 20],
    //     //         },
    //     //     ],
    //     // });
    //     /**
    //      *  图表展示流程
    //      *
    //      *      1. 请求图表数据
    //      *      2. 根据数据渲染图表
    //      */
    // },
};
</script>

<style scoped lang="scss">
#main {
    height: 500px;
}
</style>
